<template>
  <div id="roleMenuDiv">
    <vxe-toolbar perfect>
      <template #buttons>
        <div class="smallToolTitle">菜单</div>
        <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" :disabled="disabledTag" :loading="qloading" @click="selectChangeMenuEvent"></vxe-button>

      </template>
    </vxe-toolbar>
    <div class="tableBox">
      <el-scrollbar style="height: calc(100% - 40px); width: 100%">
        <!-- 树形 -->
        <el-tree ref="menuTreeRef" :data="modelMenuList" show-checkbox node-key="id" :props="defaultProps" />
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';

defineExpose({ initPage });
let sltRoleModule: any = ref({});
let modelMenuList: any = reactive([]); //菜单列表数据
let qloading = ref(false); //右侧质控表格加载+刷新
let disabledTag = ref(true); //中间质控品维护按钮标记

const defaultProps = {
  children: 'children',
  label: 'menuTitle'
};

function initPage(row: any) {
  if (isEmpty(row)) {
    sltRoleModule.value = {};
  } else {
    sltRoleModule.value = row;
    findModelMenuList();
  }

  if (!sltRoleModule.value.id) {
    disabledTag.value = true;
  } else {
    disabledTag.value = false;
  }
}

function findModelMenuList() {
  if (isEmpty(sltRoleModule.value)) {
    VxeMessage('请选模型', VxeNotifyType.error);
  } else {
    qloading.value = true;
    modelMenuList.length = 0; //放入数据前清空数据
    const url = '/lis/sta/staModelMenu/findModelMenuList';
    proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: { modelId: sltRoleModule.value.modelId, staModId: sltRoleModule.value.staModId }
      })
      .then((res: any) => {
        modelMenuList.push(...res.data);
        findStaRoleMenu();
        qloading.value = false;
      })
      .catch((err: any) => {
        qloading.value = false;
        VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
      });
  }
}

function findStaRoleMenu() {
  const menuTree = proxy.$refs.menuTreeRef;
  let staModelMenuIds = [];
  const url = '/lis/sta/staRoleMenu/findRoleMenuList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { staRoleId: sltRoleModule.value.staRoleId, staModId: sltRoleModule.value.staModId }
    })
    .then((res: any) => {
      let roleMenuList = res.data;
      if (roleMenuList.length > 0) {
        staModelMenuIds = roleMenuList.filter((item:any) => !isEmpty(item.staMenuId)).map((item: any) => item.staModelMenuId);
        menuTree.setCheckedKeys(staModelMenuIds);
      }
    })
    .catch((err: any) => {
      console.log(err);
      
      VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
    });
}
function selectChangeMenuEvent() {
  const menuTree = proxy.$refs.menuTreeRef;
  const checkNodesMenus = menuTree.getCheckedNodes(false, true);
  if (checkNodesMenus.length > 0) {
    const addRoleMenuList = [];
    for (const sltRow of checkNodesMenus) {
      const addRoleMenu = {
        modelId: sltRow.modelId,
        modelCode: sltRow.modelCode,
        staModId: sltRow.staModId,
        staModCode: sltRow.staModCode,
        staMenuId: sltRow.staMenuId,
        staMenuCode: sltRow.staMenuCode,
        staRoleId: sltRoleModule.value.staRoleId,
        staRoleCode: sltRoleModule.value.staRoleCode,
        parentId: sltRow.parentId,
        menuCode: sltRow.menuCode,
        menuTitle: sltRow.menuTitle,
        staModelMenuId: sltRow.id,
        icon: sltRow.icon,
        seq: sltRow.seq
      };
      addRoleMenuList.push(addRoleMenu);
    }

    if (addRoleMenuList.length > 0) {
      const data = { staRoleModule: sltRoleModule.value, staRoleMenuList: addRoleMenuList };
      const url = '/lis/sta/staRoleMenu/batchAddRoleMenuList';
      proxy.$http
        .post(url, data)
        .then((res: any) => {
          findModelMenuList(); // 获取检验仪器表格数据
          VxeMessage(res.status.msg, VxeNotifyType.success);
        })
        .catch((err: any) => {
          VxeMessage(err, VxeNotifyType.error);
        });
    } else {
      VxeMessage('请选择要添加的数据', VxeNotifyType.error);
    }
  } else {
    VxeMessage('请选择要添加的数据', VxeNotifyType.error);
  }
}
</script>

<style lang="scss" scoped>
#roleMenuDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .tableBox {
    height: calc(100% - 40px);
    background-color: $base-white;
  }
}
</style>